import React, { Component } from 'react'

export default class ControlCom extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: '',
  }

  //save 方法  user  pass
  save = name => {
    return (e) => {
      //更新状态
      this.setState({
        [name]: e.target.value
      })
    }
  }

  //声明 login 方法
  login = (e) => {
    e.preventDefault();
    //输出表单元素的值
    console.log(`用户名: ${this.state.user} 密码: ${this.state.pass}`)
  }

  reset = e => {
    e.preventDefault();
    //更新状态
    this.setState({
      user: '',
      pass: ''
    });
  }

  render() {
    return (
      <form>
        <h2>用户注册</h2>
        <hr />
        {/* 2. 使用状态值来作为 input 元素的 value 值  受控组件*/}
        用户名: <input  onChange={this.save('user')} type="text" value={this.state.user} /><br />
        密码: <input  onChange={this.save('pass')} type="password" value={this.state.pass} /><br />
        <hr />
        <button onClick={this.login}>注册</button>
        <button onClick={this.reset}>重置</button>
      </form>
    )
  }
}
